<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录 - TechFolio 个人项目展示网站</title>
    <link rel="stylesheet" href="/css/element-ui.css">
    <link rel="stylesheet" href="/css/common.css">
    <script src="/js/vue.js"></script>
    <script src="/js/element-ui.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/qs.js"></script>
    <style>
        .login {
            height: 750px;
            flex: 1 1 0%;
            display: flex;
            flex-direction: column;
            background-size: cover;
            background-image: url("/image/bg_common.jpg");
            background-attachment: fixed;
        }

        .login .form {
            width: 450px;
            margin: 180px auto 0px auto;
            padding: 50px 50px 20px 50px;
            background: #fff;
        }

        .login .form h1 {
            font-size: 24px;
            font-weight: bold;
            color: #6f6f6f;
            text-align: center;
            margin: 0 auto 10px auto;
        }

        .login .form h2 {
            font-size: 16px;
            font-weight: bold;
            color: #6f6f6f;
            text-align: center;
            margin: 0 auto 10px auto;
        }

        .login .form .btn-submit {
            width: 100px;
        }

        .copyright {
            padding: 30px 0px;
            text-align: center;
            font-size: 14px;
            color: #8c8c8c;
        }
    </style>
</head>

<body>
<div id="app">
    <div class="login">
        <div class="form">
            <h1>TechFolio 个人项目展示网站</h1>
            <h2>（版本：1.0.0）</h2>
            <el-divider></el-divider>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" label-position="left"
                     class="demo-ruleForm">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="ruleForm.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="ruleForm.password" type="password"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="btn-submit" @click="submitForm('ruleForm')">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
    <div class="copyright">
        <p>
            Copyright © 2025 TechFolio 个人项目展示网站. All Rights Reserved.
        </p>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            ruleForm: {
                username: 'admin',
                password: '123456'
            },
            rules: {
                username: [
                    {required: true, message: '请输入用户名', trigger: 'blur'},
                    {
                        pattern: /^[A-Za-z][A-Za-z0-9]{3,15}$/,
                        message: '用户名必须是4~16位由字母、数字组成，必须使用字母作为第1个字符',
                        trigger: 'blur'
                    }
                ],
                password: [
                    {required: true, message: '请输入密码', trigger: 'blur'},
                    {min: 4, max: 16, message: '密码必须是4~16位', trigger: 'blur'}
                ]
            }
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let url = '/api/admin/login';
                        let params = Qs.stringify(this.ruleForm);
                        axios.post(url, params).then(response => {
                            let jsonResult = response.data;
                            if (jsonResult.state == 20000) {
                                window.location.href = 'profile.html';
                            } else {
                                this.$alert(jsonResult.message, '错误', {
                                    confirmButtonText: '确定',
                                    callback: action => {
                                    }
                                });
                            }
                        }).catch(error => {
                            this.$alert('服务器端无法正确响应【管理员登录】功能！', '错误', {
                                confirmButtonText: '确定',
                                callback: action => {
                                }
                            });
                        });
                    } else {
                        let title = '操作失败';
                        this.$alert('请正确填写数据！', title, {
                            confirmButtonText: '确定',
                            callback: action => {
                            }
                        });
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        },
        mounted() {
        }
    })
</script>
</body>
</html>